<template>
  <div>


    <el-table
      :data="tableData"
      border
      style="width: 100%">

      <el-table-column
        prop="id"
        label="学号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除
          </el-button>

        </template>

      </el-table-column>
    </el-table>


    <el-pagination
      background
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="cqa"
      :total="totals">
    </el-pagination>
    
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [],
      //定义分页数据
      currentPage: 1,
      pageSize: 5,
      totals: 0,

    }
  },
  methods: {
    cqa(cq) {
      //给当前页赋值
      this.currentPage = cq
      //重新请求getele
      this.getele()

    },
    handleEdit(row) {

    },
    handleDelete(row) {

    },
    getele() {
      //当前Vue实例的tableData
      this.$http.post("/stu/list",
        {"currentPage": this.currentPage, "pageSize": this.pageSize}).then(res => {
        //res.data - axios获取数据的固定语法,最后一个data是响应的数据
        this.tableData = res.data.data;
        this.totals = res.data.totals;
      }).catch(res => {

      })
    }

  },
  mounted() {
    this.getele()

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->


